<template>
    <div class="login-container">
        <div class="login-weaper">
            <el-form :model="form" label-width="60px">
                <el-form-item label="用户名">
                    <el-input
                        v-model="form.mobile"
                        placeholder="请输入用户名"
                    />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input
                        v-model="form.password"
                        placeholder="请输入密码"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { login } from '@/api/user';
import storage from '@/utils/storage';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const form = reactive({
    mobile: '',
    password: '',
});

const onSubmit = () => {
    login(form).then((res: any) => {
        if (res.code === 0) {
            storage.set('token', res.data.token);
            router.push('/homeManager');
        }
    });
};
</script>

<style lang="scss" scoped>
.login-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: url('../../assets/login.png') no-repeat;
    background-color: #0e6cff;
    position: relative;
    background-size: cover;
    height: 100vh;
    background-position: 50%;
}

#particles-js {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
}

.login-weaper {
    margin: 0 auto;
    border-radius: 5px;
    width: 300px;
    overflow: hidden;
    -webkit-box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
    box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    background-color: #fff;
    padding: 20px 20px 0 20px;
}
</style>
